<template>
    <div class="about">
      <div>
        <p>
          <span>{{ location.name }}</span>
          实时天气
        </p>
        <p>数据观测时间：{{ timeFormat }}</p>
      </div>
      <div>
        <p><i :class="iconName"></i></p>
        <p>温度：{{now.temp}}</p>
        <p>体感温度：{{now.feelsLike}}</p>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  import {API_NOW,KEY } from "@/common/constrant";
  import { mapState } from 'vuex';
  import dayjs from "dayjs";
  import "qweather-icons/font/qweather-icons.css"
  export default {
    data() {
      return {
        now:{}
      };
    },
    computed:{
        ...mapState([
        "location"
      ]),
      timeFormat(){
        return dayjs(this.now.obs_time).format('YYYY年MM月DD日 HH时mm分');
      },
      iconName : function(){
        return "qi-" + this.now.icon;
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData(){
        axios.get(API_NOW,{
          params:{
            key: KEY,
            location: this.location.id
          }
        }).then(res=>{
          console.log(res.data);
          this.now = res.data.now;
        })
      }
    },
    //侦听器
    watch:{
      location:function(){
        //监听到location变化时，重新调用getData（）网络请求
        this.getData();
      }
    },
  }
  </script>
  <style scoped>
  i{
    color:red;
    font-size: 3rem;
  }
  </style>